import React, { useCallback, useState, memo, useMemo } from "react";



const GHButton = memo((props) => {
  console.log(props.title, '重新渲染');
  console.log(props);
  return <button onClick={props.increment}> HY + 1</button >
})

export default function CallbackHookDemo02() {
  console.log('CallbackHookDemo2重新渲染');
  const [count, setCount] = useState(0)

  const [show, setShow] = useState(true)

  const increment1 = () => {
    console.log('increment');
    setCount(count + 1)
  }

  const increment2 = useCallback(() => {
    console.log('increment');
    setCount(count + 1)
  }, [count])

  const increment3 = useMemo(() => {
    return () => {
      console.log('increment2');
      setCount(count + 1)
    }
  }, [count])

  return (
    <div>
      <h2>CallbackHookDemo02</h2>
      <h2>计数:{count}</h2>
      {/* <button onClick={increment1}>{count}</button>
      <button onClick={increment2}>{count}</button> */}
      <GHButton title="btn1" increment1={increment1}></GHButton>
      <GHButton title="btn2" increment1={increment2}></GHButton>

      <button onClick={(e) => setShow(!show)}>show切换</button>
    </div>
  )
}